<template>
    <div class="com-container">
        <!-- 折线图 -->
        <div ref="chartDom" class="com-chart" id="chartDom"></div>
        <TableDetail v-if="detailDialog" :detailDialog="detailDialog" :info="info" :queryForm="queryForm" @closeDialog="closeDialog" />
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import * as echarts from 'echarts';
import TableDetail from './table-detail.vue';

@Component({
    name: 'LineChart',
    components: {
        TableDetail,
    },
})
// 折线图
export default class LineChart extends Vue {
    @Prop() data;
    @Prop() queryForm;
    chartInstance: any = null;

    title: string = '监听消息走势详情';
    detailDialog: boolean = false;
    info: any = {}; // 点击数据详情
    chartImgUrl: string = '';
    dataNum: number = 0;

    @Watch('data', { immediate: true, deep: true })
    onWatchData(newData) {
        if (newData) {
            let that = this;
            this.$nextTick(() => {
                this.dataNum = this.data?.xData.length;
                that.updateChart(newData);
            });
        }
    }

    mounted() {
        window.handleLineClick = this.handleLineClick;
        this.initChart();
        // window.addEventListener('resize', this.screenAdapter);
    }

    initChart() {
        this.chartInstance = echarts.init(this.$refs.chartDom);
        const initOption = {
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove',
                enterable: true, // 鼠标是否可进入提示框浮层中
                confine: true, // 是否将 tooltip 框限制在图表的区域内
                extraCssText: 'z-index: 99;', // 额外附加到浮层的 css 样式
                // showDelay: 100,
                // hideDelay: 100,
                position: function(p) {
                    // 其中p为当前鼠标的位置
                    return [p[0] + 10, p[1] - 35];
                },
                formatter: params => {
                    console.log(params, 'params');

                    let color: any = '';
                    const name = params.name;
                    const seriesName = params.seriesName;
                    let marker = params.marker;
                    const value = params.value;
                    if (seriesName == '监听成功') {
                        color = '#70b603';
                        marker =
                            '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background:linear-gradient(#f2faf6,#52bf83);"></span>';
                    } else {
                        color = '#e8973c';
                        marker =
                            '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background:linear-gradient(#ee7f54,#dcc70e);"></span>';
                    }
                    return `${marker}${seriesName}次数:<span style="border-bottom:1px solid ${color};color:${color};margin:0 3px;font-size:8px;cursor:pointer;" onclick="handleLineClick('${this.title}', '${name}')">${value}次</span>${name}`;
                },
                backgroundColor: 'rgba(239,239,239,0.7)',
                borderColor: 'rgba(0,0,0,0.1)',
                textStyle: {
                    color: 'rgba(0, 0, 0, 0.65)',
                },
                axisPointer: {
                    type: 'cross',
                    // axis: 'y',
                    snap: true,
                    label: {
                        backgroundColor: '#6a7985',
                    },
                },
            },
            // toolbox: {
            //     right: 25,
            //     showTitle: false,
            //     feature: {
            //         saveAsImage: {},
            //     },
            // },
            legend: {
                left: '20%',
                icon: 'circle',
                selectedMode: false,
                // data: ['监听成功', '监听失败'],
            },

            grid: {
                left: '2%',
                right: '2%',
                top: '25%',
                bottom: '3%',
                height: '75%',
                containLabel: true,
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisLine: {
                        lineStyle: {
                            color: '#cccccc',
                        },
                    },
                    axisTick: {
                        inside: true, // 坐标轴刻度朝内
                        length: 12,
                        alignWithLabel: true,
                        color: '#8c8c8c',
                    },
                    axisLabel: {
                        color: '#8c8c8c',
                    },
                },
            ],
            yAxis: [
                {
                    type: 'value',
                    splitNumber: 3,
                    minInterval: 1,
                    max: function(value) {
                        // 最大设定
                        if (value.max == 0) {
                            return 3;
                        }
                        // else {
                        //     return Math.ceil(value.max);
                        // }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#cccccc',
                        },
                    },
                    axisTick: {
                        show: false, // 不显示刻度
                    },
                    axisLabel: {
                        color: '#8c8c8c',
                        formatter: '{value}次',
                        showMinLabel: false,
                    },
                },
            ],
            series: [
                {
                    name: '监听成功',
                    type: 'line',
                    // stack: 'Total',
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#f2faf6' },
                                { offset: 1, color: '#c3e9d5' },
                            ]),
                        },
                    },
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#f2faf6' },
                                { offset: 1, color: '#52bf83' },
                            ]), // 改变折线点的颜色
                            lineStyle: {
                                width: 1, // 折线宽度
                                color: '#c2ead5', // 改变折线颜色
                            },
                        },
                    },
                    smooth: true, // 曲线
                    // symbol: 'none', // 去除小圆点
                    showSymbol: this.dataNum == 1,
                    emphasis: {
                        focus: 'series',
                    },
                    data: [],
                    // data: [100, 132, 141, 94, 120, 130, 110],
                },
                {
                    name: '监听失败',
                    type: 'line',
                    // stack: 'Total',
                    areaStyle: {
                        normal: {
                            // color: 'red',

                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#d0cea3' },
                                { offset: 1, color: '#ccde94' },
                            ]),
                        },
                    },
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#ee7f54' },
                                { offset: 1, color: '#dcc70e' },
                            ]), // 改变折线点的颜色
                            lineStyle: { width: 0, color: 'rgba(0, 0, 0, 0)' }, // 隐藏线
                        },
                    },
                    smooth: true, // 曲线
                    // symbol: 'none', // 去除小圆点
                    // showSymbol: false,
                    showSymbol: this.dataNum == 1,
                    emphasis: {
                        focus: 'series',
                    },
                    data: [],
                    // data: [50, 62, 71, 56, 90, 89, 70],
                },
            ],
        };

        this.chartInstance.setOption(initOption);
        // 点击事件
        this.chartInstance.on('click', param => {
            const name = param.name;
            this.handleLineClick(this.title, name);
        });
    }

    // 走势图点击
    handleLineClick(title: string, name: string) {
        this.info.title = title;
        this.info.name = name;
        this.detailDialog = true;
    }
    dispose() {
        this.chartInstance.dispose(); // 销毁实例
        this.initChart();
    }

    closeDialog() {
        this.detailDialog = false;
    }
    updateChart(e) {
        if (e && e.data && e.data.length) {
            let data: any = e.data;
            data[0].showSymbol = this.dataNum == 1;
            data[1].showSymbol = this.dataNum == 1;
        }

        const dataOption = {
            xAxis: { data: e.xData },
            series: e.data,
        };
        this.chartInstance.setOption(dataOption);
    }
}
</script>

<style scoped>
.com-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.com-chart {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
